import * as echarts from 'echarts'
export const drawCharts = (dom, option, setting = {}) => {
  const node = document.querySelector(dom)
  let myChart = echarts.getInstanceByDom(node)
  if (!myChart) {
    myChart = echarts.init(node, '', setting)
  } else {
    myChart.clear()
  }
  myChart.setOption(option)
}
const label = {
  show: true,
  position: 'top'
}
const emphasis = {
  label: {
    show: true,
    position: 'top'
  }
}
export const colorList = ['#69D279', '#3E7FEF', '#FFBF00', '#F36D38', '#36C3FC', '#A44AFF', '#95B4FD', '#46E5B9', '#D446E5', '#A7E546', '#4ECCA4', '#619BE2', '#F6A8AE', '#7EDFEC', '#C1E89F']
const m = {
  itemStyle: {
    opacity: 0
  },
  emphasis: {
    itemStyle: {
      opacity: 1
    }
  }
}
export const timeTrend = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }

  },
  legend: {
    data: ['接待会话总数', '分配会话数', '有效会话数', '主动会话数', '处理留言数'],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px'
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      // formatter: '{value} s'
    },
    minInterval: 1,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    { name: '接待会话总数', type: 'bar', data: [], code: 'initCount', emphasis, color: colorList[0] },
    { name: '分配会话数', type: 'bar', data: [], code: 'assignCount', emphasis, color: colorList[1] },
    { name: '有效会话数', code: 'invalidCount', type: 'bar', data: [], emphasis, color: colorList[2] },
    { name: '主动会话数', code: 'inviteCount', type: 'bar', data: [], emphasis, color: colorList[3] },
    { name: '处理留言数', code: 'delLeavingCount', type: 'bar', data: [], emphasis, color: colorList[4] }
  ]
}
export const timeTrend2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['外呼数', '外呼失败数', '外呼振铃未接听数', '外呼接通数'],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px',
    itemStyle: {
      opacity: 1
    }
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    { name: '外呼数', ...m, type: 'line', data: [], smooth: true, code: 'outgoingCount', color: colorList[0] },
    { name: '外呼失败数', ...m, type: 'line', data: [], smooth: true, code: 'failed', color: colorList[1] },
    { name: '外呼振铃未接听数', ...m, code: 'ringNotAnswered', smooth: true, type: 'line', data: [], color: colorList[2] },
    { name: '外呼接通数', ...m, code: 'answered', type: 'line', smooth: true, data: [], color: colorList[3] }
  ]
}
export const displayName = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['外呼数', '外呼失败数', '外呼振铃未接听数', '外呼接通数'],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px'
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    { name: '外呼数', type: 'bar', data: [], code: 'outgoingCount', emphasis, color: colorList[0] },
    { name: '外呼失败数', type: 'bar', data: [], code: 'failed', emphasis, color: colorList[1] },
    { name: '外呼振铃未接听数', code: 'ringNotAnswered', type: 'bar', data: [], emphasis, color: colorList[2] },
    { name: '外呼接通数', code: 'answered', type: 'bar', data: [], emphasis, color: colorList[3] }
  ]
}
export const qualityCharts = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params, ticket, callback) => {
      let text = ''
      params.forEach(element => {
        text += '<p>' + element.marker + element.seriesName + ' ' + element.value + 's </p>'
      })
      return `<div>
       <p> ${params[0].axisValueLabel}</p>
        ${text}
      </div>`
    }
  },
  legend: {
    data: ['平均首响时长', '平均会话时长', '平均响应时长'],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px'
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLabel: {
      formatter: '{value} s'
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    { name: '平均首响时长', type: 'bar', data: [], code: 'avgFirstResponseNotIncludeLen', emphasis, color: colorList[0] },
    { name: '平均会话时长', type: 'bar', data: [], code: 'avgSessionNotIncludeTimeLen', emphasis, color: colorList[1] },
    { name: '平均响应时长', code: 'avgMsgResponseLen', type: 'bar', data: [], emphasis, color: colorList[2] }
  ]
}

// enum colorList  {

// }

export const incomingTimeTrend = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }

  },
  legend: {
    data: [],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px'
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      // formatter: '{value} s'
    },
    minInterval: 1,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    // { name: '接待会话总数', type: 'bar', data: [], code: 'initCount', emphasis, color: list[0] },
    // { name: '分配会话数', type: 'bar', data: [], code: 'assignCount', emphasis, color: list[1] },
    // { name: '有效会话数', code: 'invalidCount', type: 'bar', data: [], emphasis, color: list[2] },
    // { name: '主动会话数', code: 'inviteCount', type: 'bar', data: [], emphasis, color: list[3] },
    // { name: '处理留言数', code: 'delLeavingCount', type: 'bar', data: [], emphasis, color: list[4] }
  ]
}

export const barCherts = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }

  },
  legend: {
    data: [],
    orient: 'vertical',
    left: '20px',
    top: '30px',
    icon: 'roundRect',
    width: '300px'
  },
  grid: {
    borderWidth: 'none',
    left: '220px',
    right: '60px',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      // formatter: '{value} s'
    },
    minInterval: 1,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  series: [
    // { name: '接待会话总数', type: 'bar', data: [], code: 'initCount', emphasis, color: colorList[0] },
    // { name: '分配会话数', type: 'bar', data: [], code: 'assignCount', emphasis, color: colorList[1] },
    // { name: '有效会话数', code: 'invalidCount', type: 'bar', data: [], emphasis, color: colorList[2] },
    // { name: '主动会话数', code: 'inviteCount', type: 'bar', data: [], emphasis, color: colorList[3] },
    // { name: '处理留言数', code: 'delLeavingCount', type: 'bar', data: [], emphasis, color: colorList[4] }
  ]
}
